<!-- 文档类型声明标签，告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站，本页面采取英文显示，单也可以书写中文 -->
<html lang="en">

<head>
    <!-- 必须书写，告知浏览器以UTF-8编码表编解码中文，如果不书写就会乱码 -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 标题标签 -->
    <title>Title</title>
</head>
<body>
<!-- action : 表单提交地址 -->
<form id="register" action="#">
    <!-- 给下面的输入框绑定一个离焦事件 -->
    <input type="text" name="username" id="username" onblur="checkUserName()"/>

    <input type="submit" value="提交">
</form>
<!-- -->

<script>
    //需求1 : 当输入框失去焦点时, 验证输入内容是否符合要求 
    function checkUserName() {
        //要求用户名必须是6位任意字符
        //1.创建正则对象
        let reg=/^.{6}$/;
        //2.使用正则对象调用test函数进行校验
        //获取输入框输入的值
        let usernameValue = document.getElementById("username").value;//usernameValue 页面输入框的数据
        if(reg.test(usernameValue)) {
            alert("用户名合法");
            //可以提交表单
            return true;
        } else {
            alert("用户名非法");
            //不提交表单
            return false;
        }
    }


    //需求2：给form表单绑定提交事件，如果输入框输入的数据合法,然后将数据提交到后台服务器,如果不合法就不提交
    //1. 给整个form表单域form标签绑定提交事件
    document.getElementById("register").onsubmit=function(){
        /*
            注意 : 表单默认是可以提交的,js绑定的匿名函数的函数体默认是true,表示可以提交表单数据
                   如果返回false表示不提交表数据
        */
       //当提交表单的时候就会执行这里,然后调用checkUserName()函数,如果输入框输入的内容合法,checkUserName()
       //函数就会返回true, 如果不合法就返回false
       //注意 : 这里就把 checkUserName() 看作一个实现对输入框数据是否合法进行校验的方法,这里和上面onclick事件就是对该方法的调用
       //该方法会根据输入框数据是否合法返回对应的true或false
        return checkUserName();
    }

</script>

</body>
</html>